<template>
  <div class="container">
    <div class="search">
      <el-input v-model="params.title" placeholder="请输入歌单名" clearable></el-input>
      <el-select v-model="params.style" placeholder="曲风">
        <el-option v-for="(item, index) in songListAllType" :key="index" :label="item" :value="item"></el-option>
      </el-select>
      <el-input v-model="params.other" placeholder="模糊查询" clearable title="待完善"></el-input>
      <el-button type="primary" @click="findBySearch">搜索</el-button>
      <el-button type="warning" @click="clearParams">清空</el-button>
      <el-button type="success" @click="addSongList">新增</el-button>
    </div>

    <div class="table">
      <el-table :data="songListData" stripe highlight-current-row style="width: 100%" height="75vh">
        <el-table-column fixed label="序号" prop="id" sortable width="80" align="center"></el-table-column>
        <el-table-column fixed label="歌单名" prop="title" width="200" align="center">
          <template #default="{ row }">
            <div style="font-size: 12px">{{ row.title }}</div>
          </template>
        </el-table-column>
        <el-table-column label="歌单封面" prop="pic" width="110" align="center">
          <template #default="{ row }">
            <el-image
              style="width: 70px; height: 70px; border-radius: 50%"
              :src="'http://localhost:8080/api/files/' + row.pic"
              :preview-src-list="['http://localhost:8080/api/files/' + row.pic]"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="介绍" prop="introduction" width="450" align="center">
          <template #default="{ row }">
            <div class="multiline-ellipsis">{{ row.introduction }}</div>
          </template>
        </el-table-column>
        <el-table-column label="曲风" prop="style" width="110" align="center"></el-table-column>
        <el-table-column label="点击次数" prop="clicks" sortable width="110" align="center"></el-table-column>
        <el-table-column label="歌单内歌曲" align="center">
          <template #default="{ row }">
            <i-ep-search color="#50a6ff" size="small" @click="toListSong(row)" />
            <!-- <el-button type="primary" key="primary" link  @click="toListSong(row)">点击查看歌单内容</el-button> -->
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="140" align="center">
          <template #default="{ row }">
            <div style="margin-bottom: 5px">
              <el-button type="primary" size="small" @click="editSongList(row)">编辑</el-button>
              <el-button type="success" size="small" @click="downLoad(row)">下载</el-button>
            </div>
            <div>
              <el-button type="info" size="small" @click="detail(row)">详情</el-button>
              <el-popconfirm
                title="你确定删除吗？"
                confirm-button-text="确定"
                cancel-button-text="取消"
                @confirm="deleteSongList(row)"
              >
                <template #reference>
                  <el-button type="danger" size="small">删除</el-button>
                </template>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination">
      <el-pagination
        v-model:current-page="params.pageNum"
        v-model:page-size="params.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        size="default"
        layout="total, sizes, prev, pager, next, jumper"
        :total="params.total"
        @size-change="findBySearch"
        @current-change="findBySearch"
      />
    </div>

    <div class="dialog">
      <!-- 新增or修改 -->
      <el-dialog v-model="dialogFormVisible" width="35%" align-center>
        <template #header>
          <h3 v-if="!dialogFormData.id" style="text-align: center">添加歌单</h3>
          <h3 v-else style="text-align: center">编辑歌单</h3>
        </template>
        <el-form :model="dialogFormData">
          <el-form-item label="歌单名" label-width="20%">
            <el-input v-model="dialogFormData.title" clearable></el-input>
          </el-form-item>
          <!-- 封面上传 -->
          <el-form-item label="歌曲封面" label-width="20%">
            <el-upload
              action="http://localhost:8080/api/files/upload?fileDir=songListPic"
              list-type="picture-card"
              :auto-upload="true"
              :limit="1"
              :on-success="successUpload"
              :on-remove="handleRemove"
              :on-preview="handlePicturePreview"
              :file-list="picList"
              :class="{ 'none-up': uploadDisabled }"
            >
              <i-ep-plus />
            </el-upload>
          </el-form-item>
          <el-form-item label="介绍" label-width="20%">
            <el-input v-model="dialogFormData.introduction" type="textarea" rows="4" style="width: 90%"></el-input>
          </el-form-item>
          <el-form-item label="曲风" label-width="20%">
            <el-select v-model="dialogFormData.style" clearable placeholder="曲风">
              <el-option v-for="(item, index) in songListAllType" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="点击次数" label-width="20%">
            <el-input v-model="dialogFormData.clicks" clearable></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="submit">确定</el-button>
          </div>
        </template>
      </el-dialog>
      <!-- 头像预览 -->
      <el-dialog v-model="preImgVisible" width="600" align-center>
        <img :src="'http://localhost:8080/api/files/' + dialogFormData.pic" alt="封面预览" style="width: 100%" />
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { songListDeleteApi, songListFindAllStyleApi, songListFindBySearchApi, songListSaveApi } from '@/api/songList'
import router from '@/router'
import { ElMessage } from 'element-plus'
import { onMounted, ref, watch } from 'vue'

// 搜索框数据
const params = ref({
  id: '',
  title: '',
  style: '',
  other: '',
  total: '',
  pageNum: 1,
  pageSize: 5,
})

// 弹窗数据
const dialogFormData = ref({
  id: '',
  title: '',
  pic: '',
  introduction: '',
  style: '',
  clicks: '',
})

// 歌单信息
const songListData = ref([])
// 全部歌单类型type
const songListAllType = ref([])

// 控制新增or修改弹窗的显示与隐藏
const dialogFormVisible = ref(false)
// 控制图像预览
const preImgVisible = ref(false)

// 上传头像列表
const picList = ref<any>([])

// 上传动态类
const uploadDisabled = ref(false)

onMounted(() => {
  findAllStyle()
  findBySearch()
})

// 搜索
const findBySearch = async () => {
  let res = await songListFindBySearchApi(params.value)
  params.value.total = res.data.total
  songListData.value = res.data.list
}
// 搜索歌单的全部类型信息
const findAllStyle = async () => {
  let res = await songListFindAllStyleApi()
  songListAllType.value = res.data
}
// 清空
const clearParams = () => {
  params.value = {
    id: '',
    title: '',
    style: '',
    other: '',
    total: '',
    pageNum: 1,
    pageSize: 5,
  }
  // TODO:
  // 疑惑：这里明明没有变更songListData，为啥页面数据会变【但实际songListData内容已经发生变化了】
  // 难道是缓存数据
}
// 新增
const addSongList = () => {
  dialogFormVisible.value = true
}
// 编辑
const editSongList = (row: any) => {
  dialogFormData.value = row
  if (row.pic) {
    // picList.value = [{name:row.pic,url:'http://localhost:8080/api/files/'+row.pic}]
    picList.value.push({ name: row.pic, url: 'http://localhost:8080/api/files/' + row.pic })
  }
  // uploadDisabled.value = picList.value.length >= 1
  dialogFormVisible.value = true
}
// 下载
const downLoad = (row: any) => {
  if (row.pic.includes('|')) {
    location.href = 'http://localhost:8080/api/files/' + row.pic
  } else {
    ElMessage.warning('无可下载资源')
  }
}
// 删除
const deleteSongList = async (row: any) => {
  await songListDeleteApi(row.id)
  ElMessage.success('删除成功')
  findBySearch()
}
// 详情
const detail = (row: any) => {
  window.open('https://cn.bing.com/search?q=' + row.title, '_blank')
}
// 头像上传成功
const successUpload = (res: any, file: any, fileList: any) => {
  picList.value = fileList
  uploadDisabled.value = picList.value.length >= 1
  dialogFormData.value.pic = res.data
}
// 删除头像
const handleRemove = (file: any, fileList: any) => {
  // file:删除的头像文件
  let index = picList.value.findIndex((item: any) => item.uid === file.uid)
  picList.value.splice(index, 1)
  uploadDisabled.value = picList.value.length >= 1
  dialogFormData.value.pic = ''
}
// 预览头像
const handlePicturePreview = (file: any) => {
  preImgVisible.value = true
}
// 弹窗确定
const submit = async () => {
  await songListSaveApi(dialogFormData.value)
  ElMessage.success(dialogFormData.value.id ? '修改成功' : '添加成功')
  dialogFormVisible.value = false
  findBySearch()
}
// 弹窗取消  const cancel = () => {}
// 监视：当弹窗关闭时清空弹窗数据
watch(dialogFormVisible, (newValue, oldValue) => {
  if (newValue === false) {
    dialogFormData.value = {
      id: '',
      title: '',
      pic: '',
      introduction: '',
      style: '',
      clicks: '',
    }
    picList.value = []
    uploadDisabled.value = false
  } else if (newValue === true) {
    uploadDisabled.value = picList.value.length >= 1
  }
})
// 跳转到歌单歌曲管理界面
const toListSong = (row: any) => {
  router.push({
    path: '/songList2Song',
    query: { songListId: row.id },
  })
}
</script>

<style scoped lang="scss">
.container {
  .search {
    display: flex;
    flex-wrap: nowrap;

    .el-input {
      width: 200px;
      margin-right: 10px;
    }

    .el-select {
      width: 100px;
      margin-right: 10px;
    }
  }

  .table {
    margin: 15px 0;

    // 限制介绍的显示格式
    .multiline-ellipsis {
      display: -webkit-box;
      /* 多行折叠支持 */
      -webkit-line-clamp: 3;
      /* 限制显示的行数 */
      -webkit-box-orient: vertical;
      /* 垂直排列子元素（多行） */
      overflow: hidden;
      /* 超出隐藏 */
      text-overflow: ellipsis;
      /* 超出用省略号 */
      line-height: 20px;
      /* 每行高度（可调） */
      max-height: 60px;
      /* 3行 * line-height */
    }
  }

  .pagination {
    display: flex;
    justify-content: center;
  }

  .dialog {
    .el-input,
    .el-select {
      width: 90%;
    }
  }
}

/* CSS */
.cell {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

// 深度选择器
.none-up ::v-deep(.el-upload--picture-card) {
  display: none;
}
</style>
